<template>
	<view class="list-container">
		<xw-empty :isShow="load.status" :type="load.type"></xw-empty>
		<view class="box" v-for="item in list">
			<view class="title">{{item.title}}</view>
			<view class="content">
				<view class="l">
					<view class="price">￥{{item.price}}起</view>
					<view class="foot-btn">
						<view class="btn" @click="read(item.id)">购买</view>
						<view class="btn">视频</view>
					</view>
				</view>
				<view class="r">
					<image mode="heightFix" :src="item.white"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				load: {
					status: false,
					type: 3
				},
				list: []
			}
		},

		onLoad() {
			let type = this.$Route.query.type
			this.getProductList(type)
		},
		methods: {
			read(id) {
				this.$Router.push({
					path: '/pages/detail/detail',
					query: {
						product_id: id
					}
				})
			},
			getProductList(type) {
				this.list = []
				this.$myRequest('product/list', {
					type: type
				}).then((res) => {
					this.statusCode = true;
					if (res.code == 1000) {
						this.list = res.data.data
						if (this.list.length == 0) {
							this.load.status = true
							this.load.text = "数据为空"
						} else {
							this.load.status = false
						}
					}
				}).catch((res) => {
					this.statusCode = false
				})
			},
		}
	}
</script>

<style lang="scss">
	.box {
		margin: 40upx;
		background: linear-gradient(to bottom, #DDDDDD, #ffffff);
		border-radius: 20upx;
		padding: 40upx;
		margin-bottom: 60upx;

		.title {
			font-weight: 700;
		}

		.content {
			min-height: 160upx;
			display: flex;

			.l {
				flex: 1;

				position: relative;

				.price {
					margin-top: 20upx;
					font-weight: 700;
				}

				.foot-btn {
					position: absolute;
					bottom: 0;
					display: flex;
					font-size: 28upx;

					.btn {
						margin-right: 10upx;
						border: 1px solid #999999;
						border-radius: 10upx;
						padding: 10upx 20upx;
					}
				}

			}

			.r {
				padding-top: 20upx;

				image {
					height: 120upx;
				}
			}
		}
	}
</style>